<template>
  <div class="card-box">
    <div class="home-title">待办事项</div>
    <div class="content">
      <div class="work-content">
        <div>
          <el-tabs
            v-model="active"
            type="border-card"
            tab-position="top"
            @tab-click="tabsClick"
          >
            <el-tab-pane
              v-for="item in panes"
              :key="item.key"
              :label="item.label"
              :name="item.key"
            >
            </el-tab-pane>
            <el-table ref="table" :data="todoList" height="100%" border stripe>
              <el-table-column
                v-for="(col, index) in columns"
                :prop="col.prop"
                :key="'bs_' + index"
                :label="col.label"
                :width="col.width"
                :min-width="col.minWidth || '0'"
                :align="col.align || 'center'"
                :fixed="col.fixed"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="  150"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleDetails(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <!-- <div class="list-wrapper">
              <ul v-if="todoList.length > 0">
                <li
                  v-for="(item, index) in todoList"
                  class="list-item"
                  :key="index"
                >
                  <div>【{{ item.sub_scene }}】</div>
                  <div>{{ item.object_name }}</div>
                  <div>
                    <el-popover trigger="hover" placement="top">
                      <div>
                        {{ item.description }}
                      </div>
                      <div slot="reference" class="name-wrapper">
                        <el-tag type="danger" size="mini">红色预警</el-tag>
                      </div>
                    </el-popover>
                  </div>
                  <div>{{ item.dept_name }}</div>
                  <div>{{ item.status_text }}</div>
                  <div>
                    <el-button
                      type="success"
                      size="mini"
                      @click="handleDetails(item)"
                      >查看</el-button
                    >
                  </div>
                </li>
              </ul>
              <el-empty v-else :image-size="80"></el-empty>
            </div> -->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTodoMatters, getTodoCount, getDCGWorkTodo } from "@/api/Home/Index";
import todoToDetail from "./todoToDetail";
import commonList from "@/mixins/commonList";
export default {
  mixins: [todoToDetail, commonList],
  props: {
    homeRole: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      active: "1",
      panes: [
        {
          key: "1",
          label: "待办",
        },
        {
          key: "2",
          label: "已办",
        },
      ],
      workItems: [
        { label: "待办", value: "0" },
        { label: "已办", value: "0" },
        { label: "督办", value: "1" },
        { label: "全部", value: "1" },
      ],
      todoList: [],
    };
  },
  methods: {
    initData() {
      if (this.homeRole == 3) {
        getTodoCount().then((res) => {
          if (res.code == 0) {
            this.workItems[0].value = res.data[0].num;
            this.workItems[1].value = res.data[0].num2;
            this.workItems[2].value = res.data[0].num3;
            this.workItems[3].value = res.data[0].num4;
          }
        });

        this.initTodoList("待办");
      }

      if (this.homeRole == 4) {
        getDCGWorkTodo().then((res) => {
          if (res.code == 0) {
            this.workItems[0].value = res.data[0].num;
            this.workItems[1].value = res.data[0].num2;
            this.workItems[2].value = res.data[0].num3;
            this.workItems[3].value = res.data[0].num4;
          }
        });
      }
    },
    initTodoList(type) {
      getTodoMatters({
        type: type,
      }).then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.todoList = res.data;
        }
      });
    },
    tabsClick(item) {
      if (this.homeRole == 3) {
        this.initTodoList(item.label);
      }
    },
    format() {
      return ``;
    },
    handleDetails(item) {
      switch (item.type) {
        case "红色预警管理":
          if (item.assign_status_text == "未交办") {
            this.$router.push(`/redAlert/assignForm/${item.id}/0`);
          } else {
            this.$router.push(`/redAlert/details/${item.id}/0`);
          }
          break;
        case "问题线索移送":
          this.$router.push(`/problemTransfer/details/${item.id}/0`);
          break;
        case "领导批示(问题交办)":
          this.$router.push(`/instructionsDetails/${item.id}/1`);
          break;
        case "领导批示(结果评价)":
          this.$router.push(`/evaluationDetails/${item.id}/3`);
          break;
        default:
          break;
      }
    },
    percentCalc(todo, all) {
      let a = parseInt(todo);
      let b = parseInt(all);

      if (b == 0) {
        return 100;
      } else {
        return b - a / b;
      }
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
@import "./home.scss";

.el-tabs--border-card {
  height: 100%;
}

.content {
  height: 300px;
  > div {
    height: 100%;
  }
}

.work-content {
  width: 100%;
  display: flex;
  > div {
    width: 100%;
    height: calc(100%);
    display: flex;
    flex-direction: column;
    label {
      box-sizing: border-box;
      padding-bottom: 2px;
      border-bottom: 3px solid rgba(64, 158, 255, 1);
      margin-bottom: 5px;
      font-weight: 600;
      font-size: 14px;
    }
    // &:nth-child(1) {
    //   margin-right: 20px;
    // }
  }
}
.list-wrapper {
  ul {
    width: 100%;
    margin: 0 auto;
    padding-left: 10px;
    list-style: none;
    li {
      width: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      div {
        flex-shrink: 0;
        text-align: center;
        margin: 10px 0;
        font-size: 14px;
        &:nth-child(1) {
          width: 200px;
        }
        &:nth-child(2) {
          color: rgba(64, 158, 255, 1);
          width: 500px;
          font-weight: 600;
          text-align: left;
          font-size: 16px;
        }
        &:nth-child(3) {
          width: 200px;
        }
        &:nth-child(4) {
          width: 250px;
          margin-left: 50px;
          text-align: left;
          font-weight: 600;
        }
        &:nth-child(5) {
          width: 100px;
        }
        &:nth-child(6) {
          width: 150px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-tabs--border-card > .el-tabs__content {
  height: calc(100% - 29px - 40px);
  overflow: auto;
}
</style>
